<template>
  <van-sticky>
    <van-nav-bar
      title="员工管理"
      left-text="返回"
      left-arrow
      right-text="新增"
      @click-left="back"
      @click-right="openAdd"
    />
  </van-sticky>

  <div class="xdq-emplist">
    <van-card
      v-for="pro in userList"
      :key="pro.p_id"
      :title="'编号：' + pro.p_id"
      style="box-shadow: 0 0 15px rgba()"
    >
      <template #desc>
        <div style="font-size: 0.14rem; padding: 0.2rem 0.1rem 0.05rem">
          产品名称：{{ pro.p_name }}
        </div>
        <div style="font-size: 0.14rem; padding: 0.05rem 0.1rem">
          产品分类：{{ pro.c_name }}
        </div>
        <div style="font-size: 0.14rem; padding: 0.05rem 0.1rem">
          出厂日期：{{ pro.p_date }}
        </div>
      </template>
      <template #footer>
        <van-button type="primary" plain hairline size="small"  @click="toUpd(pro.p_id)" >修改</van-button>
        <van-button type="danger" plain hairline size="small" @click="execDel(pro.p_id)">删除</van-button>
      </template>
    </van-card>
  </div>

  
</template>

<script setup >
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { get, post, put, del, setLocalToken ,tip} from "@/common";
import { Dialog } from 'vant';
const router = useRouter();
const back = () => {
  router.push("/home");
};

const userList = ref([]);
const getUserList = () => {
  get("/info/pro").then((res) => {
    userList.value = res.data;
  });
};

getUserList();

const openAdd = ()=>{
  router.replace("/emp-add");
};


const toUpd = (p_id)=>{
  router.replace({path:'/emp-upd',query:{p_id}});
};

const execDel = (p_id)=>{
  Dialog.confirm({
  title: '确认',
  message: '您确实要删除数据吗？',
})
  .then(() => {
     del('/info/pro/'+p_id).then(res=>{
        tip.success('删除成功！');
        getUserList();
      });
  })
  .catch(() => {
    // on cancel
  });
 
};

</script>

<style>
.xdq-emplist {
  padding: 0.1rem;
}
</style>